<template>
	<view>
		<view class="userinfo">
			<view class="left">
				<view class="row01">
					<text class="name" @click="pageTo('./personal')">{{username}}</text>
					<text class="title" v-if="verify == 1">已实名</text>
					<text class="title" v-else>未实名</text>

				</view>
				<view class="row02">
					<text class="zhiwei">{{type_tag}}</text>
					<text class="company">{{companyName}}</text>
				</view>
			</view>
			<view class="right">
				<image :src="avatar"></image>
			</view>
		</view>
		<view class="cellbox">
			<view class="cellbox-item" @click="pageTo('./myreferences')">
				<image class="lefticon" mode="aspectFit" src="../../static/usercenter/wdtjr.png"></image>
				<text class="text">我的推荐人</text>
				<image class="righticon" mode="aspectFill" src="../../static/usercenter/icon_zk.png"></image>
			</view>
			<view class="cellbox-item" @click="pageTo('./myscore')">
				<image class="lefticon" mode="aspectFit" src="../../static/usercenter/jf.png"></image>
				<text class="text">我的积分</text>
				<image class="righticon" mode="aspectFill" src="../../static/usercenter/icon_zk.png"></image>
			</view>
			<view class="cellbox-item" @click="pageTo('./sh-invite-poster')">
				<image class="lefticon" mode="aspectFit" src="../../static/usercenter/share_icon.jpg"></image>
				<text class="text">我的推荐码</text>
				<image class="righticon" mode="aspectFill" src="../../static/usercenter/icon_zk.png"></image>
			</view>
			<view class="cellbox-item" @click="pageTo('./personal')">
				<image class="lefticon" mode="aspectFit" src="../../static/usercenter/wdzl.png"></image>
				<text class="text">我的资料</text>
				<image class="righticon" mode="aspectFill" src="../../static/usercenter/icon_zk.png"></image>
			</view>
			<view class="cellbox-item" @click="pageTo('./mywallet')">
				<image class="lefticon" mode="aspectFit" src="../../static/usercenter/wdqb.png"></image>
				<text class="text">我的钱包</text>
				<image class="righticon" mode="aspectFill" src="../../static/usercenter/icon_zk.png"></image>
			</view>
		</view>
		<view class="cellbox">
			<view class="cellbox-item" @click="pageTo('./releasework')">
				<image class="lefticon" mode="aspectFit" src="../../static/usercenter/zgzfb.png"></image>
				<text class="text">找工作发布</text>
				<image class="righticon" mode="aspectFill" src="../../static/usercenter/icon_zk.png"></image>
			</view>
			<view class="cellbox-item" @click="pageTo('./myteam')">
				<image class="lefticon" mode="aspectFit" src="../../static/usercenter/wdtd.png"></image>
				<text class="text">我的团队</text>
				<image class="righticon" mode="aspectFill" src="../../static/usercenter/icon_zk.png"></image>
			</view>
			<view class="cellbox-item" @click="pageTo('./myworklist')">
				<image class="lefticon" mode="aspectFit" src="../../static/usercenter/wdgzjl.png"></image>
				<text class="text">我的工作记录</text>
				<image class="righticon" mode="aspectFill" src="../../static/usercenter/icon_zk.png"></image>
			</view>
			<view class="cellbox-item" @click="pageTo('./myteamWork')">
				<image class="lefticon" mode="aspectFit" src="../../static/usercenter/wdgzjl.png"></image>
				<text class="text">团队工作记录</text>
				<image class="righticon" mode="aspectFill" src="../../static/usercenter/icon_zk.png"></image>
			</view>
			<view class="cellbox-item" @click="orderList">
				<image class="lefticon" mode="aspectFit" src="../../static/usercenter/wdgzjl.png"></image>
				<text class="text">我的订单</text>
				<image class="righticon" mode="aspectFill" src="../../static/usercenter/icon_zk.png"></image>
			</view>
		</view>
		<view class="cellbox">
			<view class="cellbox-item" @click="service">
				<image class="lefticon" mode="aspectFit" src="../../static/usercenter/zxkf.png"></image>
				<text class="text">在线客服</text>
				<image class="righticon" mode="aspectFill" src="../../static/usercenter/icon_zk.png"></image>
			</view>
		</view>

		<uni-popup ref="popup3" type="bottom">
			<view class="popup-content2">
				<button open-type="contact" class="popup-btn ">在线客服</button>
				<view class="popup-btn " @click="callPhone">官方电话</view>
				<view class="popup-btn" @click="cancel">取消</view>
			</view>
		</uni-popup>

		<uni-popup ref="popup4" type="bottom">
			<view class="popup-content2">
				<view v-for="(item,index) in isJobList" class="popup-btn " @click="select(item)">{{item}}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'

	export default {

		components: {
			uniPopup

		},
		data() {
			return {
				username: '',
				avatar: '',
				mobile: '',
				companyName: '',
				worktype: '',
				verify: -1,
				type_tag: '',
				isJobList: ['足浴', 'SPA', '推广者'],
				jobName: '推广者'
			}
		},
		onLoad() {

		},

		onShow() {
			this.myInfo();
		},
		methods: {

			bindPickerJob(e) {
				var index = e.target.value
				this.jobName = this.isJobList[index];
			},
			onlineService() {

			},
			cancel() {
				this.$refs.popup3.close();
			},
			select(item){
				console.info("===="+item);
				this.$refs.popup4.close();
				this.update(item);
				
			},
			selectType() {

				console.info(this.worktype);
				if (this.worktype == '请选择工种') {
					uni.navigateTo({
						url: './personal'
					})
				}
			},

			pageTo(url) {
				this.$util.$navigateTo(url);
			},

			orderList() {
				uni.navigateTo({
					url: '../product/orderList'
				})
			},
			choseCompany() {

				uni.navigateTo({
					url: './chooseCompany'
				})
			},

			callPhone() {

				this.$refs.popup3.close();
				uni.makePhoneCall({
					phoneNumber: '073185052195'
				});
			},

			service() {


				this.$refs.popup3.open();

			},

			update(type) {

				let param = {
					type_tag: type
				}
				let that = this;
				this.$api.updateUserInfo(param).then(res => {
					console.info(res)
					that.myInfo();
				})
			},
			myInfo() {
				let param = {

				}
				let that = this;
				this.$api.info(param).then(res => {

					if (res.code == 1) {

						let username = res.data.username;
						let mobile = res.data.mobile;
						let avatar = res.data.avatar;
						let type_tag = res.data.type_tag;
						that.type_tag = type_tag;
						that.verify = res.data.verify;
						that.avatar = avatar;
						that.mobile = mobile;
						that.username = username;
						that.companyName = res.data.companyName;
						that.$util.$setStorageSync("username", username);
						that.$util.$setStorageSync("mobile", mobile);
						that.$util.$setStorageSync("avatar", avatar);

						if (that.verify != 1) {

							uni.showModal({
								title: '实名认证',
								content: '请先实名认证',
								showCancel: false,
								confirmText: '知道了',
								success(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: './realname'
										})
									}
								}
							})
						} else {

							if (type_tag == '') {
								uni.showModal({
									title: '职位选择',
									content: '请选择职位',
									showCancel: false,
									confirmText: '选择',
									success(res) {
										var txt = "";
										if (res.confirm) {
											that.$refs.popup4.open();
										}
									}
								})
							}

						}
					}
					console.info(res)
				})
			}
		}
	}
</script>

<style lang="scss">
	.userinfo {
		background: #13B3AF;
		display: flex;
		height: 174rpx;
		padding: 70rpx 64rpx 70rpx 94rpx;

		.left {
			flex: auto;

			.row01 {
				margin-bottom: 30rpx;

				.name {
					font-size: 48rpx;
					color: #FFFFFF;
				}

				.title {
					height: 30rpx;
					background: linear-gradient(180deg, #EAB18B 0%, #F2C6A8 100%);
					border-radius: 24rpx;
					margin-left: 20rpx;
					font-size: 24rpx;
					color: #2D2D2D;
					padding: 0 10rpx;
				}
			}

			.row02 {
				.zhiwei {
					color: #FFFFFF;
					font-size: 24rpx;
				}

				.company {
					color: #FFFFFF;
					margin-left: 30rpx;
					font-size: 24rpx;
				}
			}
		}

		.right {
			image {
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
	}

	.cellbox {
		border-bottom: 1rpx solid #EBEBEB;
		margin: 0 40rpx;
		padding: 20rpx 0;

		.cellbox-item {
			display: flex;
			height: 100rpx;
			line-height: 100rpx;

			.lefticon {
				width: 50rpx;
				height: 50rpx;
				margin-top: 25rpx;
			}

			.text {
				flex: auto;
				margin-left: 20rpx;
				font-size: 28rpx;
				color: #333333;
				font-weight: 600;
			}

			.righticon {
				margin-top: 35rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.popup-content2 {
		background: #FFFFFF;

		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}

		button::after {
			border: none;
		}

		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}

	.cellbox:last-child {
		padding-bottom: 100rpx;
	}
</style>
